<template>
  <div class="home-content">
    <div class="content-left">
      <!-- 上面 -->
      <div class="list-catalog">
        <!-- 左分类 -->
        <div class="list-all fl">
          <div class="corange">
            <span class="el-icon-menu"></span>
            <span>全部分类</span>
          </div>
          <ul>
            <li>
              3C数码
              <div class="type-content">
                <div class="type-content-s">
                  <div class="type-all">电脑整机</div>
                  <ul class="type-list">
                    <li>笔记本</li>
                    <li>台式机</li>
                    <li>DIY电脑</li>
                  </ul>
                </div>
                <div class="type-content-s">
                  <div class="type-all">电脑整机</div>
                  <ul class="type-list">
                    <li>笔记本</li>
                    <li>台式机</li>
                    <li>DIY电脑</li>
                  </ul>
                </div>
                <div class="type-content-s">
                  <div class="type-all">电脑整机</div>
                  <ul class="type-list">
                    <li>笔记本</li>
                    <li>台式机</li>
                    <li>DIY电脑</li>
                  </ul>
                </div>
              </div>
            </li>
            <li>家用电器
                <div class="type-content">
                <div class="type-content-s">
                  <div class="type-all">电脑整机</div>
                  <ul class="type-list">
                    <li>笔记本</li>
                    <li>台式机</li>
                    <li>DIY电脑</li>
                  </ul>
                </div>
                <div class="type-content-s">
                  <div class="type-all">电脑整机</div>
                  <ul class="type-list">
                    <li>笔记本</li>
                    <li>台式机</li>
                    <li>DIY电脑</li>
                  </ul>
                </div>
                <div class="type-content-s">
                  <div class="type-all">电脑整机</div>
                  <ul class="type-list">
                    <li>笔记本</li>
                    <li>台式机</li>
                    <li>DIY电脑</li>
                  </ul>
                </div>
              </div>
            </li>
            <li>服饰箱包
                <div class="type-content">
                <div class="type-content-s">
                  <div class="type-all">电脑整机</div>
                  <ul class="type-list">
                    <li>笔记本</li>
                    <li>台式机</li>
                    <li>DIY电脑</li>
                  </ul>
                </div>
                <div class="type-content-s">
                  <div class="type-all">电脑整机</div>
                  <ul class="type-list">
                    <li>笔记本</li>
                    <li>台式机</li>
                    <li>DIY电脑</li>
                  </ul>
                </div>
                <div class="type-content-s">
                  <div class="type-all">电脑整机</div>
                  <ul class="type-list">
                    <li>笔记本</li>
                    <li>台式机</li>
                    <li>DIY电脑</li>
                  </ul>
                </div>
              </div>
            </li>
            <li>运动户外
                <div class="type-content">
                <div class="type-content-s">
                  <div class="type-all">电脑整机</div>
                  <ul class="type-list">
                    <li>笔记本</li>
                    <li>台式机</li>
                    <li>DIY电脑</li>
                  </ul>
                </div>
                <div class="type-content-s">
                  <div class="type-all">电脑整机</div>
                  <ul class="type-list">
                    <li>笔记本</li>
                    <li>台式机</li>
                    <li>DIY电脑</li>
                  </ul>
                </div>
                <div class="type-content-s">
                  <div class="type-all">电脑整机</div>
                  <ul class="type-list">
                    <li>笔记本</li>
                    <li>台式机</li>
                    <li>DIY电脑</li>
                  </ul>
                </div>
              </div>
            </li>
            <li>日用百货</li>
            <li>家具家装</li>
            <li>食品保健</li>
            <li>个护美妆</li>
          </ul>
          <div class="corange">
            <span class="el-icon-collection-tag"></span>
            <span>热门标签</span>
          </div>
          <ul>
            <li>防疫必备</li>
            <li>比比推荐</li>
            <li>小编亲测</li>
            <li>反季好价</li>
          </ul>
        </div>
        <!-- 右热门 -->
        <div class="hot">
          <div>
            <el-carousel height="150px" type="card">
              <el-carousel-item v-for="item in carouselImg" :key="item">
                <img :src="item" class="card-img" />
              </el-carousel-item>
            </el-carousel>
          </div>
          <div>
            <div class="corange fl">| &nbsp;热门海淘</div>
            <div class="fr">
              <a href="#" class="clink">查看更多</a>
            </div>
          </div>
          <ul class="fl">
            <li>
              <div class="hot-item">
                <div class="item-left">
                  <img src="../../assets/images/item/hot1.png" alt srcset />
                </div>
                <div class="item-right">
                  <div>NICCE Large Logo Racer 男士背心</div>
                  <div class="money">￥ 79.4</div>
                  <div>GetTheLabel中文网</div>
                </div>
              </div>
            </li>
            <li>
              <div class="hot-item">
                <div class="item-left">
                  <img src="../../assets/images/item/hot2.png" alt srcset />
                </div>
                <div class="item-right">
                  <div>Ben Sherman Reversible Bucket some</div>
                  <div class="money">￥ 74.70</div>
                  <div>GetTheLabel中文网</div>
                </div>
              </div>
            </li>
            <li>
              <div class="hot-item">
                <div class="item-left">
                  <img src="../../assets/images/item/hot3.png" alt srcset />
                </div>
                <div class="item-right">
                  <div>LANCOME 兰蔻 温和保湿系列2件套</div>
                  <div class="money">￥ 382.04</div>
                  <div>Perfumes Club中文网</div>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <!-- 底下 -->
      <listarea></listarea>
    </div>
    <div class="content-right">
      <accordion></accordion>
    </div>
  </div>
</template>
<script>
import listarea from "@/components/listarea";
import accordion from "@/components/accordion";
export default {
  components: {
    listarea,
    accordion
  },
  data() {
    return {
      carouselImg: [
        require("../../assets/images/item/hot4.png"),
        require("../../assets/images/item/hot5.png"),
        require("../../assets/images/item/hot6.png")
      ]
    };
  }
};
</script>
<style lang="less">
.home-content {
  display: flex;
  margin: 20px 0;
}
.list-catalog {
  display: flex;
  background-color: #fff;
  padding: 24px;
  ul li {
    display: inline-block;
    position: relative;
    cursor: pointer;
    width: 50%;
    padding: 10px 0;
    color: #666;
    font-size: 14px;
  }
  ul li:hover .type-content {
    display: block;
  }
  .list-all {
    width: 30%;
    border-right: 1px solid #f5f5f5;
  }
}

// 分类内容
.type-content {
  // 默认隐藏
  display: none;
  width: 600px;
  top: 15px;
  left: 50px;
  position: absolute;
  background-color: #FAFAFA;
  opacity: 0.9;
  box-shadow: -1px -1px 2px #E6E6E6;
  z-index: 10006;
}
.type-content-s {
  display: flex;
  text-align: center;
  height: 40px;
  padding: 20px;
  .type-all {
    color: #000;
    line-height: 40px;
    padding-right: 20px;
    border-right: 1px solid #666;
  }
  .type-list li {
    float: left;
    width: 75px;
  }
}
.content-left {
  flex: 3;
}
.content-right {
  flex: 1;
  background-color: #fff;
  margin-left: 20px;
}
// 热门海淘
.hot {
  margin-left: 15px;
  ul li {
    float: left;
    width: 33.3%;
  }
}
.hot-item {
  cursor: pointer;
  display: flex;
  img {
    height: 90px;
    width: 90px;
  }
  img:hover {
    transform: scale(1.5);
  }
  .item-left {
    flex: 1;
    transition: all 0.2s;
    overflow: hidden;
  }
  .item-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    font-size: 13px;
    overflow: hidden;
    div {
      //   display: block;
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
</style>